<template>
    <div class="cmt-container">
        <h3>
          发表评论
       </h3>
       <hr>
       <textarea placeholder="请你吐槽120字" maxlength="120" v-model='msg'></textarea>

       <mt-button  size="large" @click="postComment">发表评论</mt-button>

       <div class="cmt-list">
           <div class='cmt-item' v-for="(item , i) in comments" ><!--:key="时间"-->
               <div class='cmt-title'>
                   第{{i+1}}楼 &nbsp;&nbsp; 用户：{{item.user_name}} &nbsp;&nbsp;时间：{{item.add_time | dateFormat}}
               </div>
               <div class='cmt-body'>
                  {{item.content==="" ?'这个用户很懒什么也没有留下':item.content}}
               </div>
           </div>
       </div>

       <mt-button type="danger" size="large" plain  @click="getMore">加载更多...</mt-button>
    </div>
</template>
<script>
import {Toast} from 'mint-ui'

export default {
    data(){
        return {
            //idpar:this.$route.params,
           // idqu:this.$router.query,
            pageIndex:1,  //默认展示第一页数据
            comments:[],
            msg:""//评论输入的内容
        };
    },
   
    created(){
         //console.log('params++'+this.idpar)
         // console.log('query++'+this.idqu)
      this.getComments()
    },
    methods:{//获取评论内容
        getComments(){
            this.$http.get("getcomments/"+this.id+"?pageindex="+this.pageIndex)
            .then(result=>{
                // console.log('+++++')
                // console.log(result)
                if(result.status===200 && result.body!=[]){
                    //每次天加新数据的时候用concat（）拼接字符串方法，拼接到老数据后面
                    this.comments=this.comments.concat(result.body)
                }else{
                    Toast('没有获取评论！')
                }
            })
        },
        getMore(){   //加载更多评论
            this.pageIndex++;
            this.getComments()
        },
        postComment(){
        //    if(this.msg.trim().length===0){
        //        return Toast("评论内容不能为空！")
        //    }
   
           //发表评
           //参数1：请求的url地址
           //参数2：提交给服务器的数据对象{content：this.msg}
           //参数3：定义提交时，表单中的数据的格式{emulateJSON：true} (在main.js 文件做了全局配置)
           this.$http.post("postcomment/" + this.$route.params.id , {content:this.msg.trim()
           }).then(function(){
              // console.log(this.comments)
               if(this.msg.trim().length !=0){
                   //拼接出一个评论对象
                   var cmt = {
                       user_name:"匿名用户",
                       add_time:Date.now(),
                       content:this.msg.trim()
                   };
                       
                   this.comments.unshift(cmt);
                   //console.log(this.comments)
                   this.msg='';
               }else{
                       Toast('没有获取评论！')
                   }
           })
        },
    },

     props:["id"]
}
</script>
<style lang='scss' scoped>
 .cmt-container{
     h3{
         font-size:18px;
     }
     textarea{
         font-size:14px;
         height:85px;
         margin:0;
     }
 }

 .cmt-list{
     margin:5px 0;
       .cmt-item{
           font-size:13px;
              .cmt-title{
                  line-height:30px;
                  background-color:#ccc;
              }
              .cmt-body{
                  line-height:35px;
                  text-indent:2em;
              }
       }
 }
</style>